<template>
  <div class='myPriceList'>
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>服务项目维护</span>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>

    <el-table
      ref="table"
      v-loading="loadingShow"
      element-loading-text="数据正在加载中..."
      :data="tableData"
      border
      @cell-click="handle"
      @selection-change="handleSelectionChange"
      height="calc(100vh - 44px - 50px - 60px)"
      :header-cell-style="{background:'#1da4f2',color:'#fff'}"
      style="width: 100%;font-size: 15px">
      <div slot="empty">
        <div>
          <img src="../../../assets/空两本书.png" alt="" width="140" height="140" />
        </div>
        <p :style="{'marginTop': '5px'}">暂无记录</p>
      </div>
      <el-table-column
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
        prop="item_type"
        label="服务类型"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{scope.row.item_type ? typeText(scope.row.item_type) : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="item_id"
        label="服务名称"
      >
        <template slot-scope="scope">
          <span>{{scope.row.item_id ? scope.row.item_id : '空'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="doc2.doc_name"
        label="单价"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{scope.row.amount ? scope.row.amount + '元/次' : '空'}}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="keepBottom">
      <button @click="keep">确定</button>
    </div>

  </div>
</template>

<script>
// import { Toast } from 'vant'
import typeList from '../../../http/video.http'
export default {
  name: 'myPriceList',
  data () {
    return {
      userid: this.$route.query.userid,
      // select: this.$route.query.select,
      // isAll: Number(this.$route.query.isAll),
      team_id: this.$route.query.team_id,
      teamID: this.$route.query.id,
      type: Number(this.$route.query.type),
      loadingShow: false,
      tableData: [],
      selectList: [],
      row: [],
      checkList: [],
      typeList: typeList.typeList
    }
  },
  computed: {
    typeText () {
      return function (type) {
        let text = ''
        this.typeList.forEach((curr, index) => {
          if (curr.type == type) {
            text = curr.name
            return false
          }
        })
        // let text = (type == 1 ? '图文咨询'
        //   : type == 2 ? '视频咨询'
        //     : type == 3 ? '居家康复'
        //       : type == 4 ? '居家护理'
        //         : type == 5 ? '远程会诊'
        //           : type == 7 ? '居家生活'
        //             : '')
        return text
      }
    }
  },
  mounted () {
    this.checkList = JSON.parse(sessionStorage.getItem('servicePackData')).itemList
    console.log(this.checkList)
    this.getData()
  },
  methods: {
    keep () {
      // 点击确定，存储修改数据
      let data = {}
      let list = []
      console.log(this.checkList)
      this.selectList.forEach((item) => {
        let obj = {
          'doc_amount_id': item.id, // 医生项目价格ID
          'times': '1', // 次数
          item_id: item.item_id,
          'amount': item.amount, // 项目金额
          rebate: 10
        }
        this.checkList.forEach((curr) => {
          if (curr.id === item.id) {
            obj.rebate = curr.rebate
          }
        })
        list.push(obj)
      })
      if (sessionStorage.getItem('servicePackData') !== null) {
        data = JSON.parse(sessionStorage.getItem('servicePackData'))
        data.itemList = list
      } else {
        data.itemList = list
      }
      sessionStorage.setItem('servicePackData', JSON.stringify(data))
      // sessionStorage.setItem('itemListSelect', JSON.stringify(list))
      this.back()
    },
    getData () {
      this.loadingShow = true
      if (this.team_id) {
        this.$http.findTeamPrice({team_id: this.team_id, is_check_amount: '1'})
          .then(res => {
            this.loadingShow = false
            // console.log(res)
            if (res.data.status === 'success') {
              this.tableData = res.data.data
              this.tableData.map((curr, index) => {
                this.checkList.forEach(item => {
                  if (curr.id === item.doc_amount_id) {
                    // 判断选中处理，根据上一界面，获取选中相应数据
                    this.$nextTick(() => {
                      this.$refs.table.toggleRowSelection(this.tableData[index], true)
                    })
                  }
                })
              })
            } else {
              this.$toast(res.data.msg)
            }
          })
          .catch(err => {
            console.log(err)
            this.$toast('您的网络有些拥挤，请稍后再试')
          })
      } else {
        this.$http.findDocAmount({item_type: null, name: null, is_show: 1}).then(res => {
          this.loadingShow = false
          // console.log(res)
          if (res.data.status === 'success') {
            this.tableData = res.data.data
            console.log(this.tableData)
            this.tableData.map((curr, index) => {
              this.checkList.forEach(item => {
                if (curr.id === item.doc_amount_id) {
                  // 判断选中处理，根据上一界面，获取选中相应数据
                  this.$nextTick(() => {
                    this.$refs.table.toggleRowSelection(this.tableData[index], true)
                  })
                }
              })
            })
          } else {
            this.$toast(res.data.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    handleSelectionChange (val) {
      // console.log(val)
      this.selectList = val
    },
    // 点击单元格
    handle (row, column, event, cell) {
      // console.log(row)
      // console.log(column)
      // console.log(event)
      // console.log(cell)
      this.row = row
      // 将点击单元格对应的行数据加入选择行
      this.$refs.table.toggleRowSelection(row)
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    // 这两个数据应该对我无影响，留着了，看你选择改
    sessionStorage.setItem('type', this.type)
    sessionStorage.removeItem('priceDetail')
  }
}
</script>

<style lang='scss' scoped>

.myPriceList{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;

  header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 15px;
    font-weight: bold;
  }
  .div img{
    margin-right: 5px;
  }
  .div:nth-child(1) img{
    height: 13px;
    width: 7px;
    margin-left: 15px;
  }
  .div:nth-child(3) img{
    margin-right: 5px;
    width: 13px;
    height: 13px;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .div:nth-child(2){
    justify-content: center;
  }
  .div:nth-child(3){
    justify-content: flex-end;
  }
  .solid{
    color: #1DA4F2;
  }
  .keepBottom{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;

  }
  .keepBottom button{
    width: 95%;
    height: 44px;
    border: 1px solid #1DA4F2;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    border-radius: 22px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    margin: 0 10px;
  }

}
</style>
